<template>
  <!-- 套餐弹窗 style="max-height:600px;overflow:'hidden';" -->
  <z-popup closeable title="套餐选择" @close="onClose">
    <div class="popup-combo">
      <div class="popup-combo-header">
        <div class="popup-combo-shop">
          <div
            class="popup-combo-shop__cover"
            :style="{ backgroundImage: `url(${comboData.attachment})` }"
          ></div>
          <div class="popup-combo-shop__info">
            <div class="popup-combo-shop__desc">{{ comboData.goodsName }}</div>
            <div class="popup-combo-shop__stepper">
              <z-stepper v-model="comboNum" :disabled="isBanAddAll" />
            </div>
          </div>
        </div>
      </div>
      <div class="popup-combo-main">
        <div class="popup-combo-list">
          <template v-if="comboData.priceList">
            <div
              :class="{ 'popup-combo-item': true, nodata: true }"
              v-for="(groupV, groupK) in comboData.priceList[0].detail"
              :key="groupK"
            >
              <div class="combo-item-title" v-if="groupV.operType == '0'">
                可选{{ groupV.choiceType == "1" ? "项目" : "数量"
                }}<span style="color: #ffaa00">{{ groupV.maxQty }}</span>
                已选<span style="color: #ffaa00">{{
                  groupV.choiceType == "1" ? groupV.allSelectNum : groupV.allNum
                }}</span>
              </div>
              <div class="combo-item-title" v-else>固定搭配</div>
              <div
                class="combo-item-value"
                :class="{
                  spe: v.goodsFlavor,
                  none: v.isEstmClear == '1',
                  isSelect: v.isSelect,
                }"
                v-for="(v, k) in groupV.goodsDetail"
                @click="selectComb(v, groupV)"
                :key="k"
              >
                <!--  isEstmClear  1沽清 -->
                <div>
                  <div class="item-value-top">
                    <div class="value-top-name">
                      <div class="value-top-name_t">{{ v.goodsName }}</div>
                      <div class="value-top-tip" v-if="v.isEstmClear == '1'">
                        售罄
                      </div>
                    </div>
                    <z-stepper
                      :class="{ canNot: groupV.choiceType == '1' }"
                      v-model="v.stepNum"
                      :default-value="v.defaultQty"
                      :min="0"
                      theme="square"
                      :disabled="
                        groupV.operType == '1' ||
                        v.isEstmClear == '1' ||
                        groupV.choiceType == '1'
                      "
                      :disable-plus="v.canPlus"
                    ></z-stepper>
                  </div>
                  <div class="item-value-size" v-if="v.goodsFlavor">
                    <!-- IsMultiple 0 多选 1单选 -->
                    <div class="size-left">
                      已选规格：<span style="color: #cccccc">{{
                        v.flavor
                      }}</span>
                    </div>
                    <div class="size-right" @click="chooseFlover(groupK, k)">
                      选规格
                      <div
                        class="size-right-icon"
                        :class="{ spe: v.isShowFlavor }"
                      ></div>
                    </div>
                  </div>
                  <div
                    class="item-value-sizeGroup"
                    v-if="v.goodsFlavor && v.isShowFlavor"
                  >
                    <!-- <div class="sizeGroup-title">规格</div> -->
                    <div class="sizeGroup-value">
                      <div
                        class="sizeGroup-value-item"
                        v-for="(vi, ki) in v.goodsFlavor"
                        :key="ki"
                      >
                        <div class="item-sizeList-title">{{ vi.Name }}</div>
                        <div class="item-sizeList-value">
                          <div
                            class="value-item"
                            :class="{ active: vii.select }"
                            v-for="(vii, kii) in vi.sizeList"
                            :key="kii"
                            @click.stop="selectSize(groupK, k, ki, kii)"
                          >
                            {{ vii.uomName }}
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <!-- <div class="popup-combo-item__normal">
                                <div class="popup-combo-item__name">{{groupV.groupName}}</div>
                                <div class="popup-combo-item__quantity">
                                    <van-icon name="cross" size="8" color="#999999" />
                                    {{groupV.defaultQty+groupV.uomName}}
                                </div>
                            </div> -->
              <!-- <div class="popup-order-size" v-if="groupV.goodsFlavor.length">
                                <div class="popup-order-size__group" v-for="listV,listK in groupV.goodsFlavor" :key="listK">
                                    <div class="popup-order-size__heading">{{listV.Name}}</div>
                                    <ul class="popup-order-size__list">
                                        <li :class="{'popup-order-size__item':true, 'active':listV.active===k}" v-for="v,k in listV.flavourList" :key="k" v-if="listV.IsMultiple=='0'" @click="onCheckSize(listV, k, listV.IsMultiple)">{{v}}</li>
                                        <li :class="{'popup-order-size__item':true, 'active':listV.active.includes(k)}" v-for="v,k in listV.flavourList" :key="k" v-if="listV.IsMultiple=='1'" @click="onCheckSize(listV, k, listV.IsMultiple)">{{v}}</li>
                                    </ul>
                                </div>
                            </div> -->
            </div>
          </template>
        </div>
      </div>
      <div class="popup-order-footer">
        <!-- <div class="popup-order-footer-selected">已选规格：{{comboContent}}</div> -->
        <div class="popup-order-footer-panel">
          <div class="popup-order-footer__money">
            <span class="popup-order-footer__rmb">¥</span>
            <span class="popup-order-footer__price">{{
              formatNumber(comboPrice)
            }}</span>
          </div>
          <div class="popup-order-footer__control">
            <z-button @click="onJoinCart">加入</z-button>
          </div>
        </div>
      </div>
    </div>
  </z-popup>
</template>
<script setup>
// import img_product01 from '@/assets/images/open/order/img_product01.png'
import { formatNumber ,calculateOrderQty} from "@/lib/util.js";
import _ from "lodash";
import { showToast } from "vant";
const props = defineProps({
  data: {
    type: Object,
    required: true,
  },
  isBanAddAll: {
    type: Boolean,
    default: false,
  },
});

const data = toRef(props, "data");
const comboData = reactive({});

const comboPrice = ref(""); // 原价
// const memberPrice = ref('') // 会员价
const comboNum = ref(1);
const comboContent = ref("");
const comboFlavor = ref("");

// 规格显示
const chooseFlover = (k, ki) => {
  comboData.priceList[0].detail[k].goodsDetail[ki].isShowFlavor =
    !comboData.priceList[0].detail[k].goodsDetail[ki].isShowFlavor;
  // isShow = !isShow
  // console.log(isShow);
};
// 选中规格
const selectSize = (groupK, k, ki, kii) => {
  const detail = comboData.priceList[0].detail[groupK].goodsDetail[k];
  const item =
    comboData.priceList[0].detail[groupK].goodsDetail[k].goodsFlavor[ki];
  const itemSize =
    comboData.priceList[0].detail[groupK].goodsDetail[k].goodsFlavor[ki]
      .sizeList[kii];
  console.log(comboData.priceList[0].detail[groupK].goodsDetail[k]);
  console.log(item);
  // IsMultiple 0 单选 1多选
  if (item.IsMultiple == "0") {
    // 单选除了被点击的那个 其它都为false
    for (let i = 0; i < item.sizeList.length; i++) {
      if (i != kii) {
        item.sizeList[i].select = false;
      }
    }
  }
  itemSize.select = !itemSize.select;
  console.log(detail.flavor);
  console.log(detail.goodsFlavor);

  const result = detail.goodsFlavor.map((vitem) => {
    // 获取 sizeList 中 select 为 true 的 uomName 并拼接成字符串
    const flavor = vitem.sizeList
      .filter((obj) => obj.select) // 过滤出 select 为 true 的对象
      .map((obj) => obj.uomName) // 提取每个符合条件的 uomName
      .join(","); // 使用 ',' 连接成一个字符串

    return flavor; // 直接返回拼接后的字符串
  });
  console.log(result);

  detail.flavor = result.filter((obj) => obj).join(",");
};

const selectComb = (v, item) => {
  console.log(v, "vvvvv");
  console.log(item, "item----");
  console.log(v, item);
  if (item.choiceType == "0") {
    // choiceType 0数量  1种类
    return;
  }
  console.log(item.goodsDetail, "item.goodsDetail");
  const selectedCount = item.goodsDetail.filter(
    (item) => item.isSelect === true
  ).length;

  if (selectedCount >= item.maxQty && !v.isSelect == true) {
    showToast("已达到最大可选数量");
    return;
  }
  v.isSelect = !v.isSelect;
};
const calculateTotal = (dataArray) => {
    console.log(dataArray);
    
  return dataArray.reduce((total, item) => {
    if (item.goodsDetail && Array.isArray(item.goodsDetail)) {
      // 如果存在 goodsDetail 且是数组，递归计算它们的总和
      return total + calculateTotal(item.goodsDetail);
    } else if (item.stepNum !== undefined && item.salePrice !== undefined) {
      // 如果是最底层对象，计算 stepNum * salePrice 并添加到总和中
      if(item.choiceType == '1' && item.operType == '0'){
        if(item.isSelect){
            return total + Number(item.stepNum) * Number(item.salePrice);
        }else{
            return total
        }
      }else{
        return total + Number(item.stepNum) * Number(item.salePrice);
      }
    } else {
      return total;
    }
  }, 0);
};
watch(
  data,
  (nData) => {
    // console.log(nData);
    comboNum.value = 1;
    Object.assign(comboData, { ...nData });
    // console.log(nData);
    comboPrice.value = unref(comboNum) * nData.salePrice;
    // memberPrice.value = unref(comboNum) * nData.vipPrice
    const detail = nData.priceList[0].detail;
    let result = "";
    let flavorResult = "";
    for (let item of detail) {
      item.allNum = item.goodsDetail.reduce((total, v) => {
        // console.log(v);
        if (v.isEstmClear == "1") {
          v.stepNum = 0;
          v.defaultQty = 0;
        }
        return total + Number(v.stepNum);
      }, 0);
      item.allSelectNum = item.goodsDetail.reduce((total, v) => {
        // console.log(v);
        if (v.isSelect == true) {
          total++;
        }
        return total;
      }, 0);
      for (let itemDetail of item.goodsDetail) {
        console.log(itemDetail);
        
        if (item.allNum >= item.maxQty) {
          itemDetail.canPlus = true;
        } else {
          itemDetail.canPlus = false;
        }
        let toolPrice = calculateTotal(detail);
        console.log(toolPrice);
        console.log(itemDetail);
        
        if(itemDetail.choiceType == '1' && itemDetail.operType == '0'){
            // 数量为零  比例价格为0
            if (!itemDetail.isSelect) {
                itemDetail.percentPrice = 0;
                itemDetail.vipPercentPrice = 0;
            } else {
                itemDetail.percentPrice = Math.floor(
                    (Number(nData.salePrice) *
                    Number(itemDetail.salePrice) *
                    Number(itemDetail.stepNum)) /
                    Number(toolPrice)
                );
                itemDetail.vipPercentPrice = Math.floor(
                    (Number(nData.vipPrice) *
                    Number(itemDetail.salePrice) *
                    Number(itemDetail.stepNum)) /
                    Number(toolPrice)
                );
                    
            }
        }else{
            // 数量为零  比例价格为0
            if (itemDetail.stepNum <= 0) {
                itemDetail.percentPrice = 0;
                itemDetail.vipPercentPrice = 0;
            } else {
                itemDetail.percentPrice = Math.floor(
                    (Number(nData.salePrice) *
                    Number(itemDetail.salePrice) *
                    Number(itemDetail.stepNum)) /
                    Number(toolPrice)
                );
                itemDetail.vipPercentPrice = Math.floor(
                    (Number(nData.vipPrice) *
                    Number(itemDetail.salePrice) *
                    Number(itemDetail.stepNum)) /
                    Number(toolPrice)
                );
                    
            }
        }
       
      }
    }
    // console.log(detail);
    // for (let item of detail) {

    //     for (let itemDetail of item.goodsDetail){
    //         // console.log(itemDetail);
    //         let flavors = [];
    //         for (let flavor of itemDetail.goodsFlavor) {
    //             console.log(flavor);
    //             // if (flavor.IsMultiple === "1" && flavor.active && flavor.active.length > 0) {
    //             //     let activeFlavors = flavor.active.map(index => flavor.flavourList[index]);
    //             //     flavors.push(activeFlavors.join(', '));
    //             // } else if (flavor.IsMultiple === "0" && typeof flavor.active === "number") {
    //             //     flavors.push(flavor.flavourList[flavor.active]);
    //             // }
    //         }
    //         // console.log(flavors);
    //         // result += item.goodsName + (flavors.length > 0 ? flavors.join('、') : "") + " " + item.defaultQty + (item.uomName ? item.uomName : "") + "，";
    //         // // 添加口味信息到result字符串中
    //         // if (flavors.length > 0) {
    //         //     flavorResult += flavors.join('、')+"、";
    //         //     item.flavors = flavors.join('、')
    //         // }
    //     }
    //     // else {
    //     //     // result += item.goodsName + " ";
    //     //     // if (item.defaultQty > 1) {
    //     //     //     result += item.defaultQty;
    //     //     // }
    //     //     // result += item.uomName ? item.uomName : "";
    //     //     // result += "，";
    //     // }
    // }
    // comboContent.value = result.slice(0, -1);
    // comboFlavor.value = flavorResult.slice(0, -1);
  },
  { deep: true }
);

watch(comboNum, (nVal) => {
  comboPrice.value = unref(comboNum) * comboData.salePrice;
  // memberPrice.value = unref(comboNum) * comboData.salePrice
});

const emits = defineEmits(["close", "update:show", "join"]);

const onClose = () => {
  emits("close");
  emits("update:show", false);
};

// 数组结构改变
const extractBottomLevelArrays = (array, result = []) => {
  array.forEach((item) => {
    if (item.goodsDetail && Array.isArray(item.goodsDetail)) {
      // 如果存在 goodsDetail 且是数组，递归提取它们
      extractBottomLevelArrays(item.goodsDetail, result);
    } else {
      // 如果是最底层对象，直接推入结果数组
      result.push(_.cloneDeep(item));
    }
  });
  return result;
};

const calculatePriceNew=(dataArray)=>{
    let packPrice = dataArray.salePrice // 获取套餐的销售价格
        let vipPackPrice = dataArray.vipPrice // 获取套餐的vip价格
        let a = []
        let tots = 0
        var item=dataArray.detail
        item.map((e, i) => {
            let b = {
                unit: e.salePrice,
                tot: e.salePrice * e.defaultQty
            }
            a.push(b)
            tots += b.tot
        })
        let c = []
        let d = []
        a.map(e => {
            c.push(packPrice * (e.tot / tots))
            d.push(vipPackPrice * (e.tot / tots))
        })
        item = item.filter(v => v.defaultQty > 0);
        let percentPriceTemp = 0
        let vipPercentPriceTemp = 0
        for (let i = 0; i < item.length; i++) {
            item[i].percentPrice = parseInt(c[i])
            item[i].vipPercentPrice = parseInt(d[i])
            percentPriceTemp += item[i].percentPrice
            vipPercentPriceTemp += item[i].vipPercentPrice
        }
        item[item.length - 1].percentPrice += (packPrice - percentPriceTemp)
        item[item.length - 1].vipPercentPrice += (vipPackPrice - vipPercentPriceTemp)
}

// 计算比例价格的和
const calculatePrice = (dataArray) => {
  return dataArray.reduce((total, item) => {
    if (item.percentPrice !== undefined) {
      return total + item.percentPrice;
    } else {
      return total;
    }
  }, 0);
};
const calculateVipPrice = (dataArray) => {
  return dataArray.reduce((total, item) => {
    if (item.vipPercentPrice !== undefined) {
      return total + item.vipPercentPrice;
    } else {
      return total;
    }
  }, 0);
};
// 判断子项数量是否符合
// function checkSum(arr) {
//   // 辅助函数，用来计算一个对象数组中所有 stepNum 的和
//   function sumOfStepNum(arr) {
//     return arr.reduce((sum, obj) => sum + Number(obj.stepNum), 0);
//   }
//   for (let obj of arr) {
//     if (obj.goodsDetail && Array.isArray(obj.goodsDetail)) {
//       // 递归调用，计算子级对象数组的 stepNum 总和
//       const childSum = sumOfStepNum(obj.goodsDetail);
//       // 检查子级的 stepNum 总和是否等于父级的 maxQty
//       if (childSum !== obj.maxQty) {
//         return false; // 如果不等于，返回 false
//       }
//     }
//   }
//   return true; // 所有层级检查通过，返回 true
// }
function checkSum(arr) {
  console.log(arr);

  // 辅助函数，用来计算一个对象数组中所有 stepNum 的和
  function sumOfStepNum(arr) {
    return arr.reduce((sum, obj) => sum + Number(obj.stepNum), 0);
  }

  // 辅助函数，用来计算 goodsDetail 中 isSelect 为 true 的元素和
  function sumOfSelectedStepNum(arr) {
    return arr.reduce((sum, obj) => {
      console.log(obj);

      if (obj.isSelect) {
        return (sum += 1);
      }
      return sum;
    }, 0);
  }

  for (let obj of arr) {
    if (obj.goodsDetail && Array.isArray(obj.goodsDetail)) {
      // 如果 choiceType 为 0，使用原有逻辑计算 stepNum 和

      if (obj.choiceType == "0" && obj.operType == "0") {
        const childSum = sumOfStepNum(obj.goodsDetail);
        console.log(childSum);

        if (childSum != obj.maxQty) {
          return false; // 如果不等于，返回 false
        }
      }
      // 如果 choiceType 为 1，计算 isSelect 为 true 的元素和
      else if (obj.choiceType == "1" && obj.operType == "0") {
        const selectedSum = sumOfSelectedStepNum(obj.goodsDetail);
        console.log(selectedSum);

        if (selectedSum != obj.maxQty) {
          return false; // 如果不等于，返回 false
        }
      }
    }
  }
  return true; // 所有层级检查通过，返回 true
}

// 判断固定套餐内部商品是否沽清
const checkEl = (arr)=>{
  let elNum = 0
    arr.forEach(item=>{
      if(item.operType == '1'){
        if(item.goodsDetail){
          item.goodsDetail.forEach(v=>{
            if(v.isEstmClear == '1'){
              elNum ++
            }
          })
        }
      }
    })
    if(elNum > 0){
      return true
    }else{
      return false
    }
 
}

// 套餐加入购物车
const onJoinCart = function () {
  const arr = _.cloneDeep(comboData);
  const toolList = comboData.priceList[0].detail;

  console.log(arr, "arr");
  console.log(comboData.priceList[0], "comboData.priceList[0]");
  console.log(comboData.priceList[0].detail, "comboData.priceList[0].detail");
  console.log(toolList);
  if(checkEl(toolList)){
    showToast("套餐内商品已被沽清");
    return;
  }
  if (!checkSum(toolList)) {
    showToast("套餐配置不正确");
    return;
  }
  const newArr = extractBottomLevelArrays(toolList); // 改造数组
  console.log(newArr, "newArr");

  let filteredArr = newArr.filter((item) => {
    if (item.choiceType === "1" && item.isSelect === true) {
      return true; // choiceType 是 "1" 且 isSelect 为 true 时保留
    }
    if (item.choiceType === "2") {
      return true; // choiceType 是 "2" 时无条件保留
    }
    if (item.choiceType === "0") {
      return true; // choiceType 是 "2" 时无条件保留
    }
    return false;
  });

  console.log(filteredArr, "filteredArr");

  //newArr.forEach(item=>{
  filteredArr.forEach((item) => {
    if (item.isSelect) {
      item.stepNum = item.defaultQty;
    }
  });
 
  let toolPrice = calculatePrice(filteredArr); // 计算比例价格的和
  let toolVipPrice = calculateVipPrice(filteredArr);
  console.log(filteredArr);
  arr.priceList[0].detail = filteredArr;
  arr.priceList[0].detail = arr.priceList[0].detail.filter(
    (v) => v.stepNum > 0
  );
  let arrLength = arr.priceList[0].detail.length;
  if (arrLength - 1 >= 0) {
    arr.priceList[0].detail[arrLength - 1].percentPrice =
      Number(arr.priceList[0].detail[arrLength - 1].percentPrice) +
      (Number(arr.salePrice) - Number(toolPrice));
    arr.priceList[0].detail[arrLength - 1].vipPercentPrice =
      Number(arr.priceList[0].detail[arrLength - 1].vipPercentPrice) +
      (Number(arr.vipPrice) - Number(toolVipPrice));
  }
  console.log(arr.priceList[0], "arr.priceList[0]");
//   calculatePriceNew(arr.priceList[0])
  console.log("filteredArr",arr.priceList[0])
  let allPrice = 0
  arr.priceList[0].detail.map(item=> {
        allPrice  +=  item.percentPrice

  })

  console.log(allPrice,'allPrice')
//   calculateOrderQty(arr.priceList[0])
  const output = {
    mathType: "plus",
    type: comboData.type,
    num: comboNum.value,
    attachment: comboData.attachment,
    goodsType: comboData.goodsType,
    ...arr.priceList[0],
  };
  console.log(output, "output");

  //return;
  console.log(output);
  emits("join", output);
  emits("update:show", false);
};

// const onCheckSize = (listV, k, isMultiple) => {
//     if (isMultiple == 1) {
//         const arr = listV.active;
//         const idx = arr.indexOf(k);
//         if (idx !== -1) {
//             arr.splice(idx, 1);
//         } else {
//             arr.push(k);
//         }
//     } else {
//         listV.active = k
//     }
// }
</script>
<style scoped lang="scss">
.popup-combo {
  width: 334px;
  max-height: 600px;
  display: flex;
  flex-direction: column;

  &-header {
  }

  &-shop {
    display: flex;
    padding: 20px 12px;

    &__cover {
      width: 80px;
      height: 80px;
      background-repeat: no-repeat;
      background-size: cover;
      background-position: center center;
    }

    &__info {
      padding-left: 8px;
    }

    &__desc {
      font-size: 16px;
      font-family: PingFang SC;
      font-weight: 500;
      color: #ffffff;
      line-height: 20px;
      padding-top: 10px;
    }

    &__stepper {
      padding-top: 19px;
    }
  }

  &-main {
    height: 300px;
    overflow: hidden;
    padding: 0 12px;

    .popup-combo-list {
      overflow-y: auto;
      max-height: 100%;
      .popup-combo-item {
        .combo-item-title {
          font-family: PingFang SC;
          font-weight: 500;
          font-size: 16px;
          color: #ffffff;
          line-height: 16px;
          padding-bottom: 10px;
        }
        .combo-item-value {
          // width: 310px;
          // height: 260px;
          background: #5c5c66;
          border-radius: 5px;
          margin-bottom: 10px;
          padding: 12px;
          &.spe {
            padding: 12px 12px 2px;
          }
          &.none {
            filter: opacity(0.5);
          }
          &.isSelect {
            border: 2px solid #99948a;
          }
          .item-value-top {
            display: flex;
            align-items: center;
            justify-content: space-between;
            .value-top-name {
              display: flex;
              align-items: center;
              .value-top-name_t {
                font-family: PingFang SC;
                font-weight: 500;
                font-size: 14px;
                color: #ffffff;
                line-height: 14px;
                padding-right: 11px;
              }
              .value-top-tip {
                width: 40px;
                height: 20px;
                background: #383840;
                border-radius: 2px;
                font-family: PingFang SC;
                font-weight: 500;
                font-size: 12px;
                color: #999999;
                line-height: 20px;
                text-align: center;
              }
            }
            .canNot {
              filter: opacity(0.5);
            }
            ::v-deep(.z-stepper-square) {
              background: #5c5c66;
            }
          }
          .item-value-size {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 10px 0 12px 0;
            border-bottom: 1px solid #626273;
            .size-left {
              font-family: PingFang SC;
              font-weight: 500;
              font-size: 12px;
              color: #999999;
              line-height: 12px;
            }
            .size-right {
              font-family: PingFang SC;
              font-weight: 500;
              font-size: 12px;
              color: #ffaa00;
              line-height: 12px;
              padding-right: 15px;
              position: relative;
              .size-right-icon {
                position: absolute;
                right: 0;
                top: 2px;
                width: 11px;
                height: 7px;
                background-image: url("@/assets/svg/common/v_triangle_bottom-orange.svg");
                background-repeat: no-repeat;
                background-position: center center;
                background-size: contain;
                &.spe {
                  transform: rotate(180deg);
                }
              }
            }
          }
          .item-value-sizeGroup {
            // padding-top: 10px;
            .sizeGroup-title {
              font-family: PingFang SC;
              font-weight: 500;
              font-size: 13px;
              color: #cccccc;
              line-height: 13px;
              padding-bottom: 6px;
            }
            .sizeGroup-value {
              .sizeGroup-value-item {
                .item-sizeList-title {
                  font-family: PingFang SC;
                  font-weight: 500;
                  font-size: 13px;
                  color: #cccccc;
                  line-height: 24px;
                }
                .item-sizeList-value {
                  display: flex;
                  align-items: center;
                  .value-item {
                    // width: 40px;
                    height: 20px;
                    text-align: center;
                    background: #676773;
                    border-radius: 4px;
                    font-family: PingFang SC;
                    font-weight: 500;
                    font-size: 12px;
                    color: #ffffff;
                    line-height: 20px;
                    margin-right: 8px;
                    margin-bottom: 10px;
                    padding: 0 8px;
                    &.active {
                      background: #665f52;
                      color: #ffbf40;
                    }
                  }
                }
              }
            }
          }
        }
      }
    }

    // .popup-combo-item {

    //     &.nodata {
    //         padding-bottom: 20px;
    //     }

    //     &__normal {
    //         display: flex;
    //         justify-content: space-between;
    //     }

    //     &__name {
    //         font-size: 14px;
    //         font-family: PingFang SC;
    //         font-weight: 500;
    //         color: #FFFFFF;
    //         line-height: 14px;
    //     }

    //     &__quantity {
    //         font-size: 14px;
    //         font-family: PingFang SC;
    //         font-weight: 500;
    //         color: #FFFFFF;
    //         line-height: 14px;
    //     }
    // }

    // .popup-order-size {
    //     padding-top: 10px;
    //     padding-bottom: 10px;

    //     &__group {
    //         padding-top: 0;
    //     }

    //     &__heading {
    //         padding-bottom: 6px;
    //     }
    // }
  }
}
.popup-combo-shop__stepper {
  ::v-deep {
    .van-stepper__minus,
    .z-stepper-round .van-stepper__plus {
      background: #ffaa00;
      color: #212121;
    }
    .van-stepper__plus:before {
      background: #212121 !important;
    }
    .van-stepper__plus:after {
      background: #212121 !important;
    }
    .van-stepper__minus,
    .z-stepper-round .van-stepper__minus {
      background: #ffaa00;
      color: #212121;
    }
    .van-stepper__minus:before {
      background: #212121 !important;
    }
    .van-stepper__minus:after {
      background: #212121 !important;
    }
  }
}
</style>